<template>
  <div class="py-5 text-xs text-[#fff]">
    <!--    top-->
    <div class="mb-8 flex items-center justify-between border-b-[.5px] border-b-[#545b64] px-5 pb-5">
      <div class="flex flex-1 mr-2 overflow-hidden items-center">
        <!--        头像-->
        <img
          alt="avatar"
          v-if="memberInfo.avatar"
          class="h-8 w-8 rounded-[50%] mr-3 shrink-0"
          width="32px"
          height="32px"
          :src="$withPicOrigin(memberInfo.avatar)"
          :alt="'avatar'" />
        <div v-else class="ltr:mr-3 rtl:ml-3 shrink-0 flex h-8 w-8 items-center justify-center rounded-[50%] bg-[#fff]">
          <div class="flex h-5 w-5 items-center justify-center rounded-[50%] bg-[#545b64]">
            <van-icon name="user" />
          </div>
        </div>
        <div class="flex-1 overflow-hidden">
          <p class="font-[600] truncate">{{ memberInfo.name }}</p>
          <p class="text-[#8e9ca2] truncate">{{ memberInfo.email }}</p>
        </div>
      </div>
      <van-icon v-if="!$isPcScreen()" @click="closeRightPopup" size="20px" name="cross" color="#8e9ca2" />
    </div>
    <!--    list-->
    <div class="px-5 lg:flex lg:flex-wrap lg:justify-between">
      <div
        @click="handleViewChange(item, index)"
        class="cursor-pointer mb-6 flex items-center lg:w-[48%]"
        v-for="(item, index) in mainList"
        :key="index">
        <WImage class="ltr:mr-5 rtl:ml-5 h-6 w-6" :src="useAsset(item.icon)" />
        <p class="text-sm font-[500]">{{ item.text }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import WImage from '~/components/logic/WImage.vue'
import { useMemberStore } from '~/store/member'
import { memberLogout } from '~/composables/useLogic'
import YImage from '~/components/logic/YImage.vue'

const { $mt } = useCommonPlugin()
const memberStore = useMemberStore()
const { $pushRoute } = useCommonPlugin()
const { memberInfo, isLogin } = storeToRefs(memberStore)
const router = useRouter()
const props = defineProps(['showLoginRight', 'showLoginCenter'])
const emit = defineEmits(['changeShowStatus', 'changeShowCenterStatus'])
const mainList = ref([
  {
    id: 1,
    text: $mt('My Account'),
    url: '/user',
    icon: 'me-icon-zhanghu.png',
  },
  {
    id: 2,
    text: $mt('My Orders'),
    url: '/user/order',
    icon: 'me-icon-order.png',
  },
  {
    id: 3,
    text: $mt('Log Out'),
    url: '/',
    icon: 'me-icon-out.png',
  },
])

const closeRightPopup = () => {
  emit('changeShowStatus', false)
}

const handleViewChange = (item: any, index: number) => {
  if (index === 2) {
    emit('changeShowCenterStatus', false)
    memberLogout(true)
  }
  $pushRoute(item.url)
  emit('changeShowCenterStatus', false)
}
</script>

<style lang="scss"></style>
